<template>
  <div
    class="rounded-2xl border-2 border-base-200 bg-base-100 p-4 sm:p-5 md:p-5 lg:p-6"
  >
    <div class="relative">
      <RouterLink
        class="inline-block aspect-video w-full overflow-hidden"
        :to="{ name: 'blog-detail', params: { id: post.id } }"
      >
        <img
          class="h-full w-full rounded-lg object-cover"
          :src="post.cover"
          :alt="post.title"
        />
        <p class="sr-only">
          {{ post.title }}
        </p>
      </RouterLink>
    </div>
    <div class="mb-2 mt-4 flex items-center gap-2">
      <span class="icon-[uil--calender]" />
      <p class="font-sans text-sm">{{ post.createdAt }}</p>
    </div>
    <RouterLink :to="{ name: 'blog-detail', params: { id: post.id } }">
      <h3
        class="mb-2 font-sans transition-colors duration-500 hover:text-primary lg:text-xl"
        :class="digest ? 'line-clamp-2' : 'truncate'"
      >
        {{ post.title }}
      </h3>
    </RouterLink>
    <p
      v-if="digest"
      class="mb-4 line-clamp-3 h-12 font-sans text-sm text-base-content/60 sm:text-xs"
    >
      {{ post.digest }}
    </p>
    <div class="flex flex-wrap items-center justify-between gap-4">
      <div class="group flex items-center gap-2 overflow-hidden leading-tight">
        <RouterLink
          class="h-9 w-9 shrink-0 rounded-full bg-base-300 transition-colors duration-300 group-hover:bg-primary/60"
          :to="{ name: 'author-details', params: { id: post.authorId } }"
        >
          <img
            :src="post.avatar ?? `/api/avatar/${post.nickname}.svg`"
            :alt="post.title"
            class="mr-2 h-9 w-9 scale-90 rounded-full object-cover"
          />
        </RouterLink>
        <RouterLink
          :to="{ name: 'author-details', params: { id: post.authorId } }"
        >
          <h4 class="truncate font-sans text-sm group-hover:text-primary/60">
            {{ post.nickname }}
          </h4>
        </RouterLink>
      </div>
      <div class="flex">
        <RouterLink
          :to="{ name: 'blog-detail', params: { id: post.id } }"
          class="group relative flex items-center gap-2 font-sans text-sm text-primary transition-colors duration-300"
        >
          <span class="sr-only">
            {{ post.title }}
          </span>
          <span>阅读更多</span>
          <svg
            viewBox="0 0 24 24"
            class="h-4 w-4 -translate-x-1 transition-transform duration-300 group-hover:translate-x-0"
          >
            <g
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
            >
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </g>
          </svg>
        </RouterLink>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Post, User } from "@/stores/types";
import { RouterLink } from "vue-router";
interface Props {
  post: Post & User;
  digest?: boolean;
}
defineProps<Props>();
</script>
